<template>
  <el-form
    ref="form"
    class="page-form"
    :class="className"
    :model="data"
    :rules="rules"
    :label-width="labelWidth"
  >
    <el-form-item
      v-for="(item, index) in getConfigList()"
      :key="index"
      :prop="item.value"
      :label="item.label"
      :class="item.className"
    >
      <!-- solt -->
      <template v-if="item.type === 'slot'">
        <slot :name="'form-' + item.value"/>
      </template>
      <!-- 普通输入框 -->
      <el-input
        v-if="item.type === 'input' || item.type === 'password'"
        v-model="data[item.value]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        @focus="handleEvent(item.event)"
      />
      <!-- 文本输入框 -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model.trim="data[item.value]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        :autosize="item.autosize || {minRows: 2, maxRows: 10}"
        @focus="handleEvent(item.event)"
      />
      <!-- 计数器 -->
      <el-input-number
        v-if="item.type === 'inputNumber'"
        v-model="data[item.value]"
        size="small"
        :min="item.min"
        :max="item.max"
        @change="handleEvent(item.event)"
      />
      <!-- 选择框 -->
      <el-select
        v-if="item.type === 'select'"
        v-model="data[item.value]"
        :disabled="item.disabled"
        :clearable="item.clearable"
        :filterable="item.filterable"
        :placeholder="getPlaceholder(item)"
        @change="handleEvent(item.event, data[item.value])"
      >
        <el-option
          v-for="(childItem, childIndex) in listTypeInfo[item.list]"
          :key="childIndex"
          :label="childItem.key"
          :value="childItem.value"
        />
      </el-select>
      <!-- 日期选择框 -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="data[item.value]"
        :type="item.dateType"
        :picker-options="item.TimePickerOptions"
        :clearable="item.clearable"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        @focus="handleEvent(item.event)"
      />
      <!-- 信息展示框 -->
      <el-tag v-if="item.type === 'tag'">
        {{ $fn.getDataName({dataList: listTypeInfo[item.list], value: 'value', label: 'key', data: data[item.value]}) ||
        '-' }}
      </el-tag>
    </el-form-item>
  </el-form>
</template>

<script>
  // 例子
  // fieldList: [
  //   { label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount },
  //   { label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd },
  //   { label: '昵称', value: 'name', type: 'input', required: true },
  //   { label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true },
  //   { label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block' },
  //   { label: '手机号码', value: 'phone', type: 'input', validator: checkPhone },
  //   { label: '微信', value: 'wechat', type: 'input', validator: checkWechat },
  //   { label: 'QQ', value: 'qq', type: 'input', validator: checkQQ },
  //   { label: '邮箱', value: 'email', type: 'input', validator: checkEmail },
  //   { label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block' },
  //   { label: '状态', value: 'status', type: 'select', list: 'statusList', required: true }
  // ]
  export default {
    name: 'base-form',
    props: {
      // 自定义类名
      className: {
        type: String
      },
      // 表单数据
      data: {
        type: Object
      },
      // 相关字段
      fieldList: {
        type: Array
      },
      // 验证规则
      rules: {
        type: Object
      },
      // 相关的列表
      listTypeInfo: {
        type: Object
      },
      // label宽度
      labelWidth: {
        type: String,
        default: '120px'
      },
      refObj: {
        type: Object
      }
    },
    data() {
      return {}
    },
    watch: {
      data: {
        handler: function (val) {
          // 将form实例返回到父级
          this.$emit('update:refObj', this.$refs.form)
        },
        deep: true // 深度监听
      }
    },
    mounted() {
      // 将form实例返回到父级
      this.$emit('update:refObj', this.$refs.form)
    },
    methods: {
      // 获取字段列表
      getConfigList() {
        return this.fieldList.filter(item => !item.hasOwnProperty('show') || (item.hasOwnProperty('show') && item.show))
      },
      // 得到placeholder的显示
      getPlaceholder(row) {
        let placeholder
        if (row.type === 'input' || row.type === 'textarea') {
          placeholder = '请输入' + row.label
        } else if (row.type === 'select' || row.type === 'time' || row.type === 'date') {
          placeholder = '请选择' + row.label
        } else {
          placeholder = row.label
        }
        return placeholder
      },
      // 绑定的相关事件
      handleEvent(evnet) {
        this.$emit('handleEvent', evnet)
      },
      // 派发按钮点击事件
      handleClick(event, data) {
        this.$emit('handleClick', event, data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 自定义form相关
  .page-form {
    .el-form-item {
      display: inline-block;
      // float: left;
      width: 48%;

      .el-form-item__content {
        .el-input, .el-select, .el-textarea {
          width: 240px;
        }

        .el-input-number {
          .el-input {
            width: inherit;
          }
        }
      }
    }

    .el-form-block {
      display: block;
      width: 100%;

      .el-form-item__content {
        .el-textarea {
          width: 100%;
        }
      }
    }
  }

  .page-form-block {
    .el-form-item {
      display: block;

      .el-form-item__content {
        .el-input, .el-select, .el-textarea {
          width: inherit;
        }

        .el-input-number {
          .el-input {
            width: inherit;
          }
        }
      }
    }

    .el-form-block {
      display: block;
      width: 100%;

      .el-form-item__content {
        .el-textarea {
          width: 100%;
        }
      }
    }
  }
</style>
